<style lang="less">

</style>
<template>
    <div>
        <Drawer :closable="false" placement="right" v-model="drawerVisible" width="60%" :title="drawerTitle">
            <Row>
                <Col>
                    <Card :shadow="false">
                        <Row>
                            <Form ref="form" :model="form" :label-width="100" :rules="formValidate" style="position:relative">
                                <!--<FormItem label="考试类型" prop="examTypeId">
                                    <Select v-model="form.examTypeId" placeholder="选择考试类型" clearable style="width: 200px">
                                        <Option v-for="item in examTypeList" :value="item.id" :key="item.id">{{item.examTypeName}}</Option>
                                    </Select>
                                </FormItem>-->
                                <FormItem label="考试名称" prop="examName">
                                    <Input v-model="form.examName" style="width:600px" placeholder="请输入考试名称"/>
                                </FormItem>
                                <!--<FormItem label="考试分属" prop="examType">
                                    <Select v-model="form.examType" placeholder="选择考试分属" clearable style="width: 200px">
                                        <Option value="0" key="0" label="证书报考"></Option>
                                        <Option value="1" key="1" label="证书认定"></Option>
                                    </Select>
                                </FormItem>-->
                                <FormItem label="考试方式" prop="exanMode">
                                    <Select v-model="form.exanMode" placeholder="选择考试类型" clearable style="width: 200px">
                                        <Option value="1" key="1" label="网络考试"></Option>
                                        <Option value="2" key="2" label="线下考试"></Option>
                                    </Select>
                                    <!--<Input v-model="examModeString" style="width:600px" :disabled="true"/>-->
                                </FormItem>
                                <FormItem label="认定证书" v-if="form.examType == 1" prop="certificateId">
                                    <Select v-model="form.certificateId" placeholder="选择证书" clearable style="width: 200px">
                                        <Option v-for="item in certificateList" :value="item.id" :key="item.id" :label="item.label"></Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="报名费用" prop="amount">
                                    <InputNumber v-model="form.amount" style="width:600px" :min="0" :formatter="value  => `¥ ${value }`.replace(/B(?=(d{3})+(?!d))/g, ',')"
                                         :parser="value => value.replace(/¥s?|(,*)/g, '')"/>
                                </FormItem>
                                <FormItem label="报名开始时间" prop="applyBeginDate">
                                    <DatePicker  type="datetime" format="yyyy-MM-dd HH:mm:ss"  @on-change="beginChange" :value="form.applyBeginDate" style="width:300px" placeholder="请输入截至时间"></DatePicker>
                                </FormItem>
                                <FormItem label="报名结束时间" prop="applyEndDate">
                                    <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss"  @on-change="endChange" :value="form.applyEndDate" style="width:300px" placeholder="请输入截至时间"></DatePicker>
                                </FormItem>
                                <FormItem label="缴费结束时间" prop="payEndDate">
                                    <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss"  @on-change="payEndChange" :value="form.payEndDate" style="width:300px" placeholder="请输入截至时间"></DatePicker>
                                </FormItem>
                                <FormItem label="退考截止时间" prop="quitDate">
                                    <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss"  @on-change="quitChange" :value="form.quitDate" style="width:300px" placeholder="请输入截至时间"></DatePicker>
                                </FormItem>
                                <FormItem label="考试code值" prop="examinationCode">
                                    <Input v-model="form.examinationCode" style="width:600px"/>
                                </FormItem>
                                <FormItem label="考试/链接地址" prop="examinationHtml">
                                    <Input v-model="form.examinationHtml" style="width:600px"/>
                                </FormItem>

                                <FormItem label="考试说明" prop="remark">
                                    <div ref="editor"></div>
                                </FormItem>
                                <Form-item label class="br">
                                    <Button @click="editHTML" icon="ios-create-outline">编辑HTML代码</Button>
                                    <Button @click="fullscreenModal=true" icon="md-eye">预览</Button>
                                </Form-item>

                                <Form-item class="br">
                                    <Button type="primary" :loading="submitLoading" @click="handelSubmit" style="width:100px">提交</Button>
                                    <Button @click="handelCancel">取消</Button>
                                </Form-item>
                                <Spin size="large" fix v-if="loading"></Spin>
                            </Form>
                        </Row>
                    </Card>
                </Col>
            </Row>
            <!-- html编辑 -->
            <Modal title="编辑html代码" v-model="showHTMLModal" :mask-closable="false" :width="900" :fullscreen="full">
                <Input v-if="!full" v-model="dataEdit" :autosize="true" type="textarea" style="max-height:60vh;overflow:auto"/>
                <Input v-if="full" v-model="dataEdit" :autosize="true" type="textarea"/>
                <div slot="footer">
                    <Button @click="full=!full" icon="md-expand">全屏开/关</Button>
                    <Button @click="editHTMLOk" type="primary" icon="md-checkmark-circle-outline">确定保存</Button>
                </div>
            </Modal>
            <Modal title="预览" v-model="fullscreenModal" fullscreen>
                <div v-html="form.remark">{{form.remark}}</div>
                <div slot="footer">
                    <Button @click="fullscreenModal=false">关闭</Button>
                </div>
            </Modal>
        </Drawer>
    </div>
</template>
<script>
    import {uploadFile,examinationEdit,getData,getExamType,selectCertificateList} from "@/api/bus";
    import uploadInput from "@/views/my-components/flyme/upload-input";
    import E from "wangeditor";
    // 表情包配置 自定义表情可在该js文件中统一修改
    import {sina} from "@/libs/emoji";

    let editor = null;
    var xss = require("xss");
    export default {
        name: "arrangement-drawer",
        components: {
            uploadInput
        },
        data() {
            return {
                type: 0,
                isShow: false,
                loading: false, // 表单加载状态
                isExanMode: true,
                selectUsers: [],
                drawerTitle: "添加考试",
                drawerVisible: false,
                imgSize: "750*566",
                examModeString: '线下',
                certificateList: [],
                form: {
                    enumId: '',
                    amount: 0,
                    examType: '0',
                    examTypeId: 0,
                    examName: '',
                    certificateId: '',
                    applyBeginDate: '',//报名开始时间
                    applyEndDate: '',//报名结束时间
                    payEndDate: '',//缴费截止时间
                    quitDate: '',//退考截止时间
                    remark: '',//考试简介
                    examItemJson: '',//报考条件项(json)
                    isDel: 0,
                    exanMode: '2',//考试方式1线上2线下
                    isOpen: 0,
                    examinationHtml: ''//线下考试地址
                },
                examTypeList: [],
                formValidate: {
                    examName: [{required: true, message: "考试名称不能为空", trigger: "blur"}],
                    //examType: [{required: true, message: "请选择考试分属", trigger: "blur"}],
                    exanMode: [{required: true, message: "请选择考试方式", trigger: "blur"}],
                    certificateId: [{required: true, message: "请选择证书", trigger: "blur"}],
                    applyBeginDate: [{required: true, message: "报名开始时间不能为空", trigger: "blur"}],
                    applyEndDate: [{required: true, message: "报名结束时间不能为空", trigger: "blur"}],
                    payEndDate: [{required: true, message: "缴费结束时间不能为空", trigger: "blur"}],
                    quitDate: [{required: true, message: "退考截止时间不能为空", trigger: "blur"}],
                    examinationCode: [{required: true, message: "考试code不能为空", trigger: "blur"}],
                    examinationHtml: [{required: true, message: "考试/链接地址不能为空", trigger: "blur"}],
                    remark: [{required: true, message: "考试说明不能为空", trigger: "blur"}],
                    //examTypeId: [{required: true, message: "请选择考试类型", trigger: "blur"}]
                },
                submitLoading: false, // 添加或编辑提交状态
                dataEdit: "", // 编辑数据
                showHTMLModal: false, // 显示html
                full: false, // html全屏开关
                fullscreenModal: false// 显示全屏预览
            };
        },
        methods: {
            init() {
                this.initEditor();
                this.selectCertificate()
            },
            selectCertificate(){
                selectCertificateList().then(res => {
                    console.info(res)
                    this.certificateList = res.data
                });
            },
            showDrawer(params) {
                this.form.examType = params.examType
                this.form.enumId = params.enumId
                this.form.examTypeId = params.examTypeId
                this.getExamType();
                this.imgSize = "750*566";
                if (params.id) {
                    this.type = 1;
                    this.drawerTitle = "编辑考试";
                    this.form.id = params.id;
                    this.getData();
                } else {
                    this.drawerTitle = "添加考试";
                    this.type = 0;
                }
                this.drawerVisible = true;
            },
            beginChange(data1,data2){
                this.form.applyBeginDate = data1;
            },
            endChange(data1,data2){
                this.form.applyEndDate = data1;
            },
            payEndChange(data1,data2){
                this.form.payEndDate = data1;
            },
            quitChange(data1,data2){
                this.form.quitDate = data1;
            },

            getExamType() {
                getExamType().then(res => {
                    this.examTypeList = res.data
                });
            },
            initEditor() {
                let that = this;
                editor = new E(this.$refs.editor);
                editor.customConfig.onchange = html => {
                    this.form.remark = html;
                };
                editor.customConfig.uploadImgServer = uploadFile;
                editor.customConfig.uploadImgHeaders = {
                    Authorization: that.getStore("accessToken")
                };
                editor.customConfig.uploadFileName = "file";
                editor.customConfig.uploadImgHooks = {
                    before: function (xhr, editor, files) {
                    },
                    success: function (xhr, editor, result) {
                    },
                    fail: function (xhr, editor, result) {
                        that.$Message.error("上传图片失败");
                    },
                    error: function (xhr, editor) {
                        that.$Message.error("上传图片出错");
                    },
                    timeout: function (xhr, editor) {
                        that.$Message.error("上传图片超时");
                    },
                    customInsert: function (insertImg, result, editor) {
                        if (result.status === true) {
                            let url = result.data.fileUrl;
                            insertImg(url);
                            that.$Message.success("上传图片成功");
                        } else {
                            that.$Message.error(result.info);
                        }
                    }
                };
                editor.customConfig.fontNames = ["微软雅黑", "宋体", "黑体", "Arial"];
                editor.customConfig.emotions = [
                    {
                        title: "新浪",
                        type: "image",
                        content: sina
                    }
                ];
                editor.create();
            },
            editHTML() {
                this.dataEdit = this.form.remark;
                this.showHTMLModal = true;
            },
            editHTMLOk() {
                editor.txt.html(this.dataEdit);
                this.form.remark = xss(this.dataEdit);
                this.showHTMLModal = false;
            },
            getData() {
                this.loading = true;
                getData(this.form.id).then(res => {
                    console.info(res.data)
                    this.loading = false;
                    if (res.status === true) {
                        this.form = res.data;
                        editor.txt.html(this.form.remark);
                    }
                });
            },
            handelSubmit() {
                /*if(this.form.examType == '1' && this.form.exanMode!='1'){
                    this.$Message.error('请选择考试方式');
                    return
                }*/
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        // 编辑
                        examinationEdit(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.$parent.getDataList();
                                this.drawerVisible = false;
                            }else {
                                this.$Message.error(res.message);
                            }
                        });
                    }
                });
            },
            handelCancel() {
                this.drawerVisible = false;
            },
        },
        mounted() {
            this.init();
        },
        watch: {}
    };
</script>